<template>
  <div class="third" :class="{current:iscurrent==2}">
    <div class="info3"></div>
    <div class="circle">
      <img src="../images/rocket.png" class="rocket" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Section3",
  data() {
    return {};
  },
  props: ["iscurrent"],
  created() {}
};
</script>

<style scoped >
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.third {
  position: absolute;
  height: 650px;
  left: 50%;
  top:10%;
  
}
.third .info3 {
  width: 631px;
  height: 278px;
  background: url("../images/info_3.png") no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-100%, -50%);
}
.third .circle {
  width: 453px;
  height: 449px;
  background: url("../images/circle.png") no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(20%, -50%);
}
.third .circle .rocket {
  width: 203px;
  height: 204px;
  position: absolute;
  left: 25%;
  top: 28%;
  transform: translate(-600px, 550px);
  transition: transform 1s;
}
.third.current .circle .rocket {
  transform: none;
}
</style>